<template>
  <div class="purchase-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">行政物品采购与发放管理流程</h2>
        <div class="process-status">
          <el-tag type="info">当前步骤：{{ currentStepInfo.title }}</el-tag>
          <el-tag type="warning" v-if="formData.purchaseLevel === 'urgent'">紧急采购</el-tag>
        </div>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info" shadow="hover">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>
                <i :class="currentStepInfo.icon"></i>
                {{ currentStepInfo.title }}
              </h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in currentStepInfo.formItems" 
                         :key="index"
                         :class="{ 'full-width': item.type === 'textarea' || item.type === 'upload' }">
                    <el-form-item :label="item.label"
                                :prop="item.prop"
                                :required="item.required"
                                :class="{ 'is-required': item.required }">
                      <el-input v-if="item.type === 'input'" 
                               v-model="formData[item.prop]"
                               :type="item.inputType || 'text'"
                               :placeholder="item.placeholder">
                        <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                      </el-input>
                      <el-select v-else-if="item.type === 'select'"
                                v-model="formData[item.prop]"
                                :placeholder="item.placeholder"
                                :multiple="item.multiple">
                        <el-option v-for="option in item.options"
                                 :key="option.value"
                                 :label="option.label"
                                 :value="option.value">
                        </el-option>
                      </el-select>
                      <el-date-picker v-else-if="item.type === 'date'"
                                    v-model="formData[item.prop]"
                                    :type="item.dateType || 'date'"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd">
                      </el-date-picker>
                      <el-input v-else-if="item.type === 'textarea'"
                               type="textarea"
                               v-model="formData[item.prop]"
                               :rows="item.rows || 4"
                               :placeholder="item.placeholder">
                      </el-input>
                      <el-upload v-else-if="item.type === 'upload'"
                                class="upload-demo"
                                action="#"
                                :auto-upload="false"
                                :on-change="handleFileChange"
                                :file-list="fileList">
                        <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>
                  <i class="el-icon-warning-outline"></i>
                  注意事项：
                </h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">
                    <i class="el-icon-check"></i>
                    {{ tip }}
                  </li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left"
                          size="medium">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed"
                          size="medium">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>

    <!-- 添加流程进度提示 -->
    <div class="process-progress">
      <div class="progress-info">
        <span>流程进度：</span>
        <el-progress :percentage="(currentStep + 1) / processSteps.length * 100" 
                    :format="format"
                    status="success"></el-progress>
      </div>
      <div class="step-count">
        <span>当前步骤：{{ currentStep + 1 }}/{{ processSteps.length }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PurchaseProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数量'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        itemType: [{ required: true, message: '请选择物品类型', trigger: 'change' }],
        itemName: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        budget: [
          { required: true, message: '请输入预算金额', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        department: [{ required: true, message: '请选择申请部门', trigger: 'change' }],
        purpose: [{ required: true, message: '请填写使用用途', trigger: 'blur' }],
        approvalProcess: [{ required: true, message: '请选择审批流程', trigger: 'change' }],
        approvers: [{ required: true, message: '请选择审批人', trigger: 'change' }],
        approvalOrder: [{ required: true, message: '请选择审批顺序', trigger: 'change' }]
      },
      processSteps: [
        {
          title: '采购申请',
          shortDesc: '填写采购需求',
          icon: 'el-icon-edit-outline',
          description: '请填写物品采购申请信息',
          formItems: [
            {
              type: 'select',
              label: '物品类型',
              prop: 'itemType',
              placeholder: '请选择物品类型',
              required: true,
              options: [
                { label: '办公耗材', value: 'office_supplies' },
                { label: '办公设备', value: 'office_equipment' },
                { label: '电子设备', value: 'electronic' },
                { label: '日常用品', value: 'daily' },
                { label: '清洁用品', value: 'cleaning' },
                { label: '劳保用品', value: 'labor_protection' },
                { label: '食品饮料', value: 'food_beverage' },
                { label: '礼品物料', value: 'gifts' }
              ]
            },
            {
              type: 'input',
              label: '申请编号',
              prop: 'requestCode',
              placeholder: '系统自动生成',
              disabled: true
            },
            {
              type: 'input',
              label: '物品名称',
              prop: 'itemName',
              placeholder: '请输入物品名称',
              required: true
            },
            {
              type: 'textarea',
              label: '规格型号',
              prop: 'specification',
              placeholder: '请详细描述物品规格、型号、参数等',
              rows: 3
            },
            {
              type: 'input',
              inputType: 'number',
              label: '采购数量',
              prop: 'quantity',
              placeholder: '请输入数量',
              required: true,
              unit: '个'
            },
            {
              type: 'input',
              inputType: 'number',
              label: '预算单价',
              prop: 'unitPrice',
              placeholder: '请输入单价',
              required: true,
              unit: '元'
            },
            {
              type: 'input',
              inputType: 'number',
              label: '预算总额',
              prop: 'totalBudget',
              placeholder: '系统自动计算',
              disabled: true,
              unit: '元'
            },
            {
              type: 'select',
              label: '采购级别',
              prop: 'purchaseLevel',
              placeholder: '请选择采购级别',
              options: [
                { label: '一般采购', value: 'normal' },
                { label: '紧急采购', value: 'urgent' },
                { label: '战略采购', value: 'strategic' }
              ]
            },
            {
              type: 'select',
              label: '申请部门',
              prop: 'department',
              placeholder: '请选择申请部门',
              required: true,
              options: [
                { label: '行政部', value: 'admin' },
                { label: '人事部', value: 'hr' },
                { label: '财务部', value: 'finance' },
                { label: '技术部', value: 'tech' },
                { label: '市场部', value: 'marketing' },
                { label: '销售部', value: 'sales' }
              ]
            },
            {
              type: 'date',
              label: '期望到货',
              prop: 'expectedDate',
              placeholder: '请选择期望到货日期'
            },
            {
              type: 'textarea',
              label: '使用用途',
              prop: 'purpose',
              placeholder: '请详细说明物品使用用途',
              required: true,
              rows: 4
            },
            {
              type: 'upload',
              label: '附件材料',
              prop: 'attachments',
              tip: '可上传参考图片、说明书等材料（JPG、PDF格式）'
            }
          ],
          tips: [
            '请准确填写物品规格和数量',
            '预算金额应符合部门额度要求',
            '紧急采购需说明紧急原因',
            '重要物品建议提供参考图片'
          ]
        },
        {
          title: '供应商选择',
          shortDesc: '选择供应商',
          icon: 'el-icon-goods',
          description: '请选择合适的供应商并填写相关信息',
          formItems: [
            {
              type: 'select',
              label: '供应商类型',
              prop: 'supplierType',
              placeholder: '请选择供应商类型',
              options: [
                { label: '战略供应商', value: 'strategic' },
                { label: '固定供应商', value: 'fixed' },
                { label: '临时供应商', value: 'temporary' },
                { label: '新供应商', value: 'new' }
              ]
            },
            {
              type: 'select',
              label: '供应商名称',
              prop: 'supplierName',
              placeholder: '请选择供应商',
              options: [
                { label: '供应商A', value: 'supplier_a' },
                { label: '供应商B', value: 'supplier_b' },
                { label: '供应商C', value: 'supplier_c' }
              ]
            },
            {
              type: 'input',
              label: '供应商编号',
              prop: 'supplierCode',
              placeholder: '请输入供应商编号'
            },
            {
              type: 'input',
              label: '联系人',
              prop: 'contactPerson',
              placeholder: '请输入供应商联系人'
            },
            {
              type: 'input',
              label: '联系电话',
              prop: 'contactPhone',
              placeholder: '请输入联系电话'
            },
            {
              type: 'input',
              label: '电子邮箱',
              prop: 'email',
              placeholder: '请输入电子邮箱'
            },
            {
              type: 'textarea',
              label: '供应商地址',
              prop: 'address',
              placeholder: '请输入供应商详细地址',
              rows: 3
            },
            {
              type: 'upload',
              label: '营业执照',
              prop: 'license',
              tip: '请上传供应商营业执照复印件（PDF格式）'
            },
            {
              type: 'upload',
              label: '资质证明',
              prop: 'qualification',
              tip: '请上传相关资质证明材料（PDF格式）'
            },
            {
              type: 'upload',
              label: '报价单',
              prop: 'quotation',
              tip: '请上传供应商报价单（PDF格式）'
            },
            {
              type: 'textarea',
              label: '供应商评价',
              prop: 'evaluation',
              placeholder: '请输入对供应商的评价意见',
              rows: 4
            }
          ],
          tips: [
            '优先选择已有合作供应商',
            '新供应商需提供完整资质',
            '注意比较多家供应商报价',
            '重要物品建议实地考察'
          ]
        },
        {
          title: '采购执行',
          shortDesc: '执行采购',
          icon: 'el-icon-shopping-cart-full',
          description: '填写采购执行相关信息',
          formItems: [
            {
              type: 'select',
              label: '采购方式',
              prop: 'purchaseMethod',
              placeholder: '请选择采购方式',
              options: [
                { label: '询价采购', value: 'inquiry' },
                { label: '竞争性谈判', value: 'negotiation' },
                { label: '单一来源', value: 'single_source' },
                { label: '招标采购', value: 'bidding' }
              ]
            },
            {
              type: 'select',
              label: '付款方式',
              prop: 'paymentMethod',
              placeholder: '请选择付款方式',
              options: [
                { label: '预付款', value: 'prepaid' },
                { label: '货到付款', value: 'cod' },
                { label: '分期付款', value: 'installment' },
                { label: '账期付款', value: 'credit' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '预付比例',
              prop: 'prepaidRatio',
              placeholder: '请输入预付款比例',
              unit: '%'
            },
            {
              type: 'date',
              label: '合同签订',
              prop: 'contractDate',
              placeholder: '请选择合同签订日期'
            },
            {
              type: 'date',
              label: '预计到货',
              prop: 'expectedDelivery',
              placeholder: '请选择预计到货日期'
            },
            {
              type: 'select',
              label: '运输方式',
              prop: 'transportMethod',
              placeholder: '请选择运输方式',
              options: [
                { label: '供应商配送', value: 'supplier_delivery' },
                { label: '快递物流', value: 'express' },
                { label: '自行提货', value: 'self_pickup' }
              ]
            },
            {
              type: 'select',
              label: '收货地点',
              prop: 'deliveryLocation',
              placeholder: '请选择收货地点',
              options: [
                { label: '公司前台', value: 'reception' },
                { label: '行政办公室', value: 'admin_office' },
                { label: '物资仓库', value: 'warehouse' },
                { label: '指定地点', value: 'specified' }
              ]
            },
            {
              type: 'textarea',
              label: '收货地址',
              prop: 'deliveryAddress',
              placeholder: '请输入详细收货地址',
              rows: 3
            },
            {
              type: 'select',
              label: '验收人员',
              prop: 'inspector',
              placeholder: '请选择验收人员',
              multiple: true,
              options: [
                { label: '行政专员', value: 'admin_specialist' },
                { label: '仓库管理员', value: 'warehouse_keeper' },
                { label: '采购专员', value: 'purchase_specialist' },
                { label: '部门负责人', value: 'department_head' },
                { label: '技术人员', value: 'technician' }
              ]
            },
            {
              type: 'upload',
              label: '采购合同',
              prop: 'contract',
              tip: '请上传采购合同扫描件'
            }
          ],
          tips: [
            '注意确认付款条件和方式',
            '重要物品需签订采购合同',
            '提前安排验收人员时间',
            '准备好验收标准和工具'
          ]
        },
        {
          title: '审批流程',
          shortDesc: '进行审批',
          icon: 'el-icon-s-check',
          description: '物品采购与发放的审批流程',
          formItems: [
            {
              type: 'select',
              label: '审批流程',
              prop: 'approvalProcess',
              placeholder: '请选择审批流程',
              required: true,
              options: [
                { label: '普通审批', value: 'normal' },
                { label: '加急审批', value: 'urgent' },
                { label: '特殊审批', value: 'special' }
              ]
            },
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: true,
              multiple: true,
              options: [
                { label: '张三（部门主管）', value: 'zhangsan' },
                { label: '李四（行政主管）', value: 'lisi' },
                { label: '王五（财务主管）', value: 'wangwu' },
                { label: '赵六（总经理）', value: 'zhaoliu' },
                { label: '孙七（采购主管）', value: 'sunqi' },
                { label: '周八（仓库主管）', value: 'zhouba' }
              ]
            },
            {
              type: 'select',
              label: '审批顺序',
              prop: 'approvalOrder',
              placeholder: '请选择审批顺序',
              required: true,
              options: [
                { label: '顺序审批', value: 'sequential' },
                { label: '并行审批', value: 'parallel' },
                { label: '会签审批', value: 'countersign' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '审批期限',
              prop: 'approvalDeadline',
              placeholder: '请输入审批期限',
              unit: '工作日'
            },
            {
              type: 'select',
              label: '预算审核',
              prop: 'budgetCheck',
              placeholder: '请选择预算审核方式',
              options: [
                { label: '部门预算内', value: 'within_budget' },
                { label: '超出预算', value: 'over_budget' },
                { label: '专项预算', value: 'special_budget' }
              ]
            },
            {
              type: 'select',
              label: '抄送人员',
              prop: 'ccList',
              placeholder: '请选择抄送人员',
              multiple: true,
              options: [
                { label: '部门同事', value: 'department_colleagues' },
                { label: '相关部门负责人', value: 'related_managers' },
                { label: '财务人员', value: 'finance_staff' }
              ]
            },
            {
              type: 'textarea',
              label: '申请说明',
              prop: 'applicationNote',
              placeholder: '请输入申请说明和补充信息',
              rows: 4
            },
            {
              type: 'upload',
              label: '补充材料',
              prop: 'additionalDocs',
              tip: '请上传相关补充说明材料（PDF格式）'
            },
            {
              type: 'select',
              label: '紧急程度',
              prop: 'urgencyLevel',
              placeholder: '请选择紧急程度',
              options: [
                { label: '普通', value: 'normal' },
                { label: '紧急', value: 'urgent' },
                { label: '特急', value: 'very_urgent' }
              ]
            },
            {
              type: 'select',
              label: '通知方式',
              prop: 'notificationMethod',
              placeholder: '请选择通知方式',
              multiple: true,
              options: [
                { label: '系统消息', value: 'system' },
                { label: '邮件通知', value: 'email' },
                { label: '短信通知', value: 'sms' }
              ]
            }
          ],
          tips: [
            '选择合适的审批流程和审批人',
            '重要物品采购需要更高级别审批',
            '超预算采购需要特殊审批',
            '及时跟进审批进度',
            '确保审批材料完整准确',
            '紧急采购需说明紧急原因'
          ]
        },
        {
          title: '物品发放',
          shortDesc: '物品发放',
          icon: 'el-icon-box',
          description: '安排物品发放事项',
          formItems: [
            {
              type: 'select',
              label: '入库类型',
              prop: 'storageType',
              placeholder: '请选择入库类型',
              options: [
                { label: '直接发放', value: 'direct' },
                { label: '仓库入库', value: 'warehouse' },
                { label: '临时存放', value: 'temporary' }
              ]
            },
            {
              type: 'select',
              label: '发放方式',
              prop: 'distributionMethod',
              placeholder: '请选择发放方式',
              options: [
                { label: '统一发放', value: 'unified' },
                { label: '按需发放', value: 'on_demand' },
                { label: '分批发放', value: 'batch' },
                { label: '定期发放', value: 'regular' }
              ]
            },
            {
              type: 'select',
              label: '领用人员',
              prop: 'recipients',
              placeholder: '请选择领用人员',
              multiple: true,
              options: [
                { label: '全体员工', value: 'all_staff' },
                { label: '部门主管', value: 'department_manager' },
                { label: '指定人员', value: 'specified_staff' }
              ]
            },
            {
              type: 'textarea',
              label: '发放说明',
              prop: 'distributionNotes',
              placeholder: '请输入发放注意事项',
              rows: 4
            },
            {
              type: 'select',
              label: '物品编码',
              prop: 'itemCode',
              placeholder: '请选择物品编码方式',
              options: [
                { label: '条形码', value: 'barcode' },
                { label: '二维码', value: 'qrcode' },
                { label: '资产编号', value: 'asset_code' }
              ]
            },
            {
              type: 'select',
              label: '库存管理',
              prop: 'inventoryManagement',
              placeholder: '请选择库存管理方式',
              options: [
                { label: '先进先出', value: 'fifo' },
                { label: '后进先出', value: 'lifo' },
                { label: '加权平均', value: 'weighted_average' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '安全库存',
              prop: 'safetyStock',
              placeholder: '请设置安全库存量',
              unit: '个'
            },
            {
              type: 'upload',
              label: '签收表',
              prop: 'receiptForm',
              tip: '请上传物品签收表模板'
            },
            {
              type: 'textarea',
              label: '保管要求',
              prop: 'storageRequirements',
              placeholder: '请输入物品保管要求',
              rows: 3
            }
          ],
          tips: [
            '做好物品清点和核对工作',
            '准备好签收记录表格',
            '注意物品保管和存放要求',
            '建立物品使用跟踪记录',
            '定期盘点库存情况',
            '及时补充安全库存'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    },
    format(percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`;
    }
  },
  methods: {
    async nextStep() {
      try {
        // 验证当前步骤的表单
        await this.$refs.stepForm.validate()
        
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        // 验证失败时显示错误提示
        this.$message.error('请正确填写所有必填项')
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        // 提交数据到后端
        await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟提交
        this.$message.success('流程提交成功')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请检查网络连接')
      } finally {
        this.submitting = false
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    handleFileChange(file, fileList) {
      const isValidFormat = (file.name.endsWith('.jpg') || 
                           file.name.endsWith('.png') || 
                           file.name.endsWith('.pdf') || 
                           file.name.endsWith('.doc') || 
                           file.name.endsWith('.docx'))
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isValidFormat) {
        this.$message.error('文件格式不正确！')
        return false
      }
      if (!isLt5M) {
        this.$message.error('文件大小不能超过 5MB！')
        return false
      }
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.purchase-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
          font-size: 16px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        font-weight: 600;
      }

      .process-status {
        margin-top: 10px;
        
        .el-tag {
          margin: 0 5px;
          
          &.el-tag--warning {
            background-color: #fdf6ec;
            color: #e6a23c;
          }
        }
      }
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

    .el-steps {
      margin-bottom: 40px;
      padding: 0 20px;
    }
  }

  .process-content {
    .current-step-info {
      .step-header {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebeef5;

        h3 {
          color: #303133;
          margin-bottom: 10px;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            margin-right: 10px;
            color: #409EFF;
          }
        }

        .description {
          color: #606266;
          font-size: 14px;
          margin: 0;
        }
      }

      .step-form {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 4px;

        .el-form-item {
          margin-bottom: 22px;

          &.full-width {
            width: 100%;
          }
        }

        .el-select {
          width: 100%;
        }
      }

      .step-tips {
        margin: 30px auto;
        padding: 20px;
        background: #fdf6ec;
        border-radius: 4px;
        max-width: 800px;
        
        h4 {
          color: #e6a23c;
          margin: 0 0 15px;
          font-size: 16px;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
          }
        }

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          
          li {
            color: #666;
            margin-bottom: 8px;
            display: flex;
            align-items: center;

            i {
              color: #67c23a;
              margin-right: 8px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .button-group {
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #ebeef5;

        .el-button {
          margin: 0 10px;
          padding: 12px 25px;
          font-size: 14px;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .process-progress {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .progress-info {
      flex: 1;
      margin-right: 20px;
      display: flex;
      align-items: center;

      span {
        margin-right: 10px;
        color: #606266;
      }

      .el-progress {
        width: 100%;
        max-width: 300px;
      }
    }

    .step-count {
      color: #606266;
      font-size: 14px;
    }
  }
}

// 深度选择器样式优化
:deep(.el-step__icon) {
  cursor: pointer;
  
  &.is-text {
    border-color: #409EFF;
    
    .el-step__icon-inner {
      color: #409EFF;
    }
  }
}

:deep(.el-step__title) {
  font-size: 14px;
  
  &.is-process {
    font-weight: 600;
    color: #409EFF;
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__inner) {
  &:hover, &:focus {
    border-color: #409EFF;
  }
}
</style> 